<template>
    <div class="layout">
        <Layout :style="{minHeight: '100vh'}">
            <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
                <div class="layout-logo">
                    <Row type="flex" justify="center" class="code-row-bg">HM-CodeGenN2</Row>
                </div>
                <Menu ref="menu" :active-name="highlightMenu.code" theme="dark" width="auto" :open-names="openNames">
                    <Submenu v-for="(directoryItem, idx) in menus" :key="directoryItem.code + idx" :name="directoryItem.code">
                        <template slot="title">
                            {{directoryItem.title}}
                        </template>
                        <MenuItem v-for="(item, i) in directoryItem.children" :key="item.code + i" :name="item.code" :to="item.url">
                            {{item.title}}
                        </MenuItem>
                    </Submenu>
                </Menu>
            </Sider>
            <Layout :style="{marginLeft: '200px'}">
                <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}">
                    <Row>
                        <Col span="12">
                            <Row type="flex" justify="start" class="code-row-bg">
                                <Breadcrumb>
                                    <BreadcrumbItem>{{highlightMenu.parentTitle}}</BreadcrumbItem>
                                    <BreadcrumbItem>{{highlightMenu.title}}</BreadcrumbItem>
                                </Breadcrumb>
                            </Row>
                        </Col>
                        <Col span="12">
                            <Row type="flex" justify="end" class="code-row-bg">
                                <Dropdown trigger="click" @on-click="handleUserMenuClick">
                                    <a href="javascript:void(0)">
                                        <Avatar style="background-color: #007aff;margin-right: 5px;margin-bottom: 5px;" size="small">{{userName.substring(0,1)}}</Avatar>
                                        <span style="font-size: 12px">{{userName}}</span>
                                        <Icon type="ios-arrow-down" style="margin-left: 10px;"></Icon>
                                    </a>
                                    <DropdownMenu slot="list">
                                        <DropdownItem name="logout">退出登录</DropdownItem>
                                    </DropdownMenu>
                                </Dropdown>
                            </Row>
                        </Col>
                    </Row>
                </Header>
                <Content :style="{padding: '16px 16px 16px'}">
                    <Card>
                        <router-view></router-view>
                    </Card>
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: "layout",
        data () {
            return {
                isCollapsed: false,
                userName:'',
                highlightMenu: {},
                openNames: []
            };
        },
        created() {
            let userInfor = JSON.parse(window.localStorage.userInfo)
            this.userName=userInfor.username
            if (this.submenus[0] !== undefined) {
                this.refreshUIMenu()
            }
        },
        computed: {
            ...mapState({
                menus: state => state.menu.menus,
                submenus: state => state.menu.submenus,
                userInfo:state => state.menu.userInfo,
            }),
            rotateIcon () {
                return [
                    'menu-icon',
                    this.isCollapsed ? 'rotate-icon' : ''
                ];
            },
            menuitemClasses () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        watch: {
            /* eslint-disable */
            '$store.state.menu.submenus': function(newv, oldv) {
                this.refreshUIMenu()
            },
            openNames (val) {
                this.$nextTick(() => {
                    this.$refs.menu.updateOpened()
                })
            }
            /* eslint-disable */
        },
        methods: {
            refreshUIMenu() {
                if (this.submenus[0].url !== this.$route.path && this.$route.path === '/main') {
                    this.$router.push(this.submenus[0].url)
                }
                let me = this
                setTimeout(function() {
                    me.highlightMenu = me.$store.getters['menu/findHighlightMenu'](me.$route.path)
                    me.openNames.push(me.highlightMenu.parentCode)
                }, 100)
            },
            collapsedSider () {
                this.$refs.side1.toggleCollapse()
            },
            handleUserMenuClick (name) {
                if (name === 'logout') {
                    window.localStorage.removeItem("token")
                    window.localStorage.removeItem("userInfo")
                    this.$router.push('/')
                    this.$store.dispatch('menu/clear')
                    this.$store.dispatch('login/logout')
                }
            }
        }
    }
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .layout-logo {
        height: 50px;
        color: white;
        font-size: 18px;
        line-height: 50px;
        background: #5b6270;
    }
    .layout-header-bar{
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width: 90%;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        margin: 15px auto;
    }
    .menu-icon{
        transition: all .3s;
    }
    .rotate-icon{
        transform: rotate(-90deg);
    }
    .menu-item span{
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }
    .menu-item i{
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }
    .collapsed-menu span{
        width: 0px;
        transition: width .2s ease;
    }
    .collapsed-menu i{
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>